<template>
  <div
    :class="['left_item_container',{'left_item_active':selectIndex===index?true:false}]"
    @click="onClick(item)"
  >
    <div class="left_item_title">{{title}}</div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    selectIndex: Number,
    index: Number
  },
  data() {
    return {
      title: this.item.name
    };
  },
  methods: {
    onClick(item) {
      let obj = {
        index: this.index,
        item: item
      };
      this.$store.dispatch("active", obj);
    }
  }
};
</script>

<style scoped>
.left_item_container {
  width: 100%;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.left_item_active {
  border-left: 3px solid red;
}
</style>